

//使用  =》antd
import { Button, Form, Input, Select, Checkbox } from 'antd';
import React from 'react';
import {loginData,loginType,loginRes} from '../../https/Api/login'
import {useNavigate} from 'react-router-dom'



function PasswordC() {
    const [form] = Form.useForm();
   let  navigate = useNavigate()
   

    const onFinish = (values: any) => {
        console.log(values); //获取到我们的数据 =》发送请求

        // 1 当用户名称和密码有值的
        getLogin(values)
       
        // 登录操作

        //权限处理 =》

        //你的项目的 =》
        // 我的这个项目的，权限分为有  院长，主任  ，医生， 护士长  护士
        
        //根据不同的用户的，动态生成路由，和 侧边栏导航


        //代码实现 步骤

        // 1 判断内部页面和外部页面 =》 前端是通过  路由守卫   后端 通过token

        // loginData({name:})
        
    };

    // ts 
     const  getLogin = (obj:loginType)=>{
        // 
        loginData({name:obj.name,password:obj.password}).then((res:any)=>{
            console.log(res,5558); //获取到后端给的数据

            if(res.code==200){
                 //1 保存token
              
                 sessionStorage.setItem('token',res.token)
                 sessionStorage.setItem('routers',JSON.stringify(getRouterList(res.routers,[])))
               
                 

                //  2跳转页面 =》内部页面
                //
                navigate("/layout/home",{replace:true})
            }
            
        })
     }

      const  getRouterList  =(lists:any[],arrs:any[])=>{
           
      //数据结多维结构 =》一维结构    =>递归
   
               lists.forEach((item)=>{
                   if(item.children){  //二层
                    arrs.push( ...getRouterList(item.children,[]))
                   }else{
                    arrs.push(item)
                   }
               })

               return arrs
          
      }
   

    return (
        <Form

            form={form}
            name="control-hooks"
            onFinish={onFinish}
            style={{ maxWidth: 600 }}
        >
            <Form.Item name="name" rules={[{ required: true }]}>
                <Input />
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true }]}>
                <Input />
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 1, span: 16 }}>
                <Checkbox>Remember me</Checkbox>
            </Form.Item>
            <Form.Item >
                <Button type="primary" htmlType="submit" style={{width:"100%"}}>
                    Submit
                </Button>

            </Form.Item>
        </Form>
    );
}



// form 属性
// layout =>flex 布局

// form.item
// label  =>  表单名称

export default PasswordC